import React, { useState, useEffect } from 'react';
import { Radio, Spin, Select, Button } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import style from '../report.css';
import IndexStyle from '@/pages/IndexPage.css';
import CostTrendChart from './CostTrendChart';
import RankBarChart from './RankBarChart';
import CostPieChart from './CostPieChart';

let infoList = [
    { title:'当月累计用电费', value:'274,321', unit:'元' }, 
    { title:'当月总预算', value:'500,000', unit:'元' }, 
    { title:'同比', value:12.4, unit:'%' },
    { title:'环比', value:-11.3, unit:'%' }
];

const { Option } = Select;

function PageItem3({ dispatch, title, companyName, energy, cost, fields, baseCost, startDate }){
    
    return (
        <div className={style['page-container']} >
            <div className={style['page-title']}>
                <div className={style['page-title-content']}>{ title }</div>
                <div className={style['page-title-symbol']}></div>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', height:'90px', margin:'1rem 0' }}>
                {
                    infoList.map((item, index)=>{
                        let color = item.unit === '%' ? item.value <= 0 ? '#00b42a' : '#f53d3d' : '#000';
                        return (
                            <div key={index} style={{
                                height:'100%',
                                width:'calc( (100% - 3rem)/4 )',
                                borderRadius:'6px',
                                display:'flex',
                                flexDirection:'column',
                                justifyContent:'center',
                                paddingLeft:'1rem',
                                backgroundImage:'linear-gradient(to Right, #daedff, rgba(218, 237, 255, 0.35))',
                            }}>
                                <div style={{ color:'#000' }}>
                                    { item.unit === '%' ? item.value <= 0 ? <ArrowDownOutlined style={{ fontSize:'1.6rem', color }} /> : <ArrowUpOutlined style={{ fontSize:'1.6rem', color }} /> : null }
                                    <span style={{ fontSize:'2rem', color  }}>{ item.unit === '%' ? Math.abs(item.value) : item.value }</span>
                                    <span style={{ fontSize:'1rem', color }}>{ item.unit }</span>
                                </div>
                                <div>{ item.title }</div>
                            </div>
                        )  
                    })
                }
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', height:'300px', marginBottom:'1rem' }}>
                <div className={IndexStyle['card-container']} style={{ width:'calc( ( 100% - 2rem)/3)', height:'100%', border:'1px solid #eaeaea'  }}>
                    <div className={IndexStyle['card-title']}>时段成本占比</div>
                    <div className={IndexStyle['card-content']}>
                        <CostPieChart dataSource='1' />
                    </div>
                </div>
                <div className={IndexStyle['card-container']} style={{ width:'calc( ( 100% - 2rem)/3)', height:'100%', border:'1px solid #eaeaea'  }}>
                    <div className={IndexStyle['card-title']}>设备成本占比</div>
                    <div className={IndexStyle['card-content']}>
                        <CostPieChart dataSource='2' />
                    </div>
                </div>
                <div className={IndexStyle['card-container']} style={{ width:'calc( ( 100% - 2rem)/3)', height:'100%', border:'1px solid #eaeaea'  }}>
                    <div className={IndexStyle['card-title']}>能源成本占比</div>
                    <div className={IndexStyle['card-content']}>
                        <CostPieChart dataSource='3' />
                    </div>
                </div>
                
            </div>
            <div className={IndexStyle['card-container']} style={{ height:'300px', marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <div className={IndexStyle['card-title']}>成本趋势</div>
                <div className={IndexStyle['card-content']}>
                    <CostTrendChart />
                </div>
            </div> 
            <div className={IndexStyle['card-container']} style={{ height:'300px', marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <div className={IndexStyle['card-title']}>设备成本排名</div>
                <div className={IndexStyle['card-content']}>
                    <RankBarChart />
                </div>
            </div>
        </div>
    )
}

export default PageItem3;